<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.js"></script>
    <script src="js/axios-0.18.0.js"></script>
</head>

<body>
    <div id="app">
        <center>
            <!-- 表格显示数据 -->
            <table border="1" cellspacing="0" width="80%">
                <tr>
                    <th>序号</th>
                    <th>姓名</th>
                    <th>头像</th>
                    <th>性别</th>
                    <th>岗位</th>
                    <th>入职日期</th>
                    <th>最后操作时间</th>
                    <th>操作</th>
                </tr>
                <!-- 遍历数据 -->
                <tr align="center" v-for="(emp,index) in emps" :key="index">
                    <td>{{index + 1}}</td>
                    <td>{{emp.name}}</td>
                    <td>
                        <img :src="emp.image" width="70px" height="50px">
                    </td>
                    <td>
                        <span v-if="emp.gender == 1">男</span>
                        <span v-if="emp.gender == 2">女</span>
                    </td>
                    <td>{{emp.job}}</td>
                    <td>{{emp.entrydate}}</td>
                    <td>{{emp.updatetime}}</td>
                    <td>
                        <a href="#">编辑</a>
                        <a href="#">删除</a>
                    </td>
                </tr>
            </table>
        </center>

    </div>

</body>

</html>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                //准备数据
                emps: [{
                    "id": 1,
                    "name": "我是静态的数据",
                    "image": "1.jpg",
                    "gender": 1,
                    "job": "班主任",
                    "entrydate": "2023-06-09",
                    "updatetime": "2023-07-01 00:00:00"
                }]
            }
        },
        mounted() {
            //1.this接收
            /* // console.log("mounted", this);
            var _this = this;
            //挂载完成加载数据  初始化
            axios({
                method: 'get',
                url: 'http://localhost:10010/emp/list'
            }).then(function (resp) {
                // console.log("axios", this)
                // console.log(resp);
                //应该将查询后的数组赋值给data中的模型数据
                _this.emps = resp.data.data;

                //总结：axios括号中无法使用vue(this),需要改写为箭头函数或在外面先接受this变量
            }); */


            //2.箭头函数
            axios({
                method: 'get',
                url: 'http://localhost:10010/emp/list'
            }).then(resp => {

                this.emps = resp.data.data;

            });
        }
    });
</script>